<template>
    <div id="login">
        <h2>欢迎登录</h2>
        <form action="#">
            <p><input type="text" placeholder="请输入用户名" v-model="user.username"></p>
            <p><input type="password" placeholder="请输入密码" v-model="user.password"></p>
            <p><input type="button" value="立即登录" @click="login"></p>
        </form>
    </div>
</template>

<script>


export default {
    name: "Login",
    data(){
        return{
            user:{
                username:'',
                password:''
            }
        }
    },
    methods:{
        login(){
            console.log("登录")
            console.log(JSON.stringify(this.user))
            // 发送异步请求

            // 成功 切换路由
            // this.$router.push('/index')
        }
    }
}
</script>

<style scoped>
#login{
    margin: 0 auto;
    width: 300px;
    height: 300px;
    border: 1px solid red;
    text-align: center;
}

h2{
    color: #67C23A;
}
</style>